<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>

        <style>

            #box {
                width: 200px;
                height: 200px;

                background-color: blue;

                position:relative;
                left: 0;

                /* 指定动画名称 animation-name */
                animation-name: mymovie;

                /* 动画时间 animation-duration */
                animation-duration: 2s;

                /* 动画时间函数 animation-timing-function */
                animation-timing-function: linear;

                /* 动画 延迟时间 animation-delay */
                animation-delay: 0s;

                /* 动画 执行次数 animation-iteration-count */
                animation-iteration-count: infinite;

                /* 动画 执行方向 animation-direction */
                animation-direction: alternate;
            }

            /* 关键帧中定义了动画要执行哪一些关键动作 */
            @keyframes mymovie {
                0% {
                    left: 0;
                    top: 0;

                    border-radius: 0;
                }
                25% {
                    left: 300px;
                    top:  0px;

                    border-radius: 25%;
                }
                50% {
                    left: 300px;
                    top: 300px;

                    border-radius: 50%;
                }
                75% {
                    left: 0px;
                    top:  300px;

                    border-radius: 25%;
                }
                100% {
                    left: 0;
                    top: 0;

                    border-radius: 0;
                }
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>